<template>
  <div class="login-container">
    <div class="input-cell">
      <input
        v-model="mobile"
        class="login-input"
        placeholder="请输入手机号"
        type="number"
      />
      <div class="login-icon">
        <img src="@/assets/登录-assets/telephone.png" alt="" />
      </div>
    </div>
    <div class="input-cell">
      <input
        v-model="captcha"
        class="login-input"
        placeholder="请输入验证码"
        type="number"
      />
      <button
        @click="getCaptcha"
        :class="{ 'captcha-btn': true, disabled: captchaStatus }"
        :disabled="captchaStatus"
      >
        <span v-if="!captchaStatus">获取验证码</span>
        <yd-countdown
          v-else
          time="59"
          format="{%s}"
          timetype="second"
          :callback="
            () => {
              captchaStatus = false;
            }
          "
        ></yd-countdown>
      </button>
      <div class="login-icon">
        <img src="@/assets/登录-手机验证码-assets/captcha.png" alt="" />
      </div>
    </div>
    <div class="input-cell">
      <input
        v-model="psw1"
        class="login-input"
        placeholder="请输入密码"
        type="password"
      />
      <div class="login-icon">
        <img src="@/assets/登录-assets/password.png" alt="" />
      </div>
    </div>
    <div class="input-cell">
      <input
        v-model="psw2"
        class="login-input"
        placeholder="请确认密码"
        type="password"
      />
      <div class="login-icon">
        <img src="@/assets/登录-assets/password.png" alt="" />
      </div>
    </div>
    <div class="input-cell">
      <input
        v-model="invite_code"
        class="login-input"
        placeholder="请输入邀请码"
      />
      <div class="login-icon"></div>
    </div>
    <button @click="toLogin" class="to-login">已有账号？去登录</button>
    <button @click="register" class="main-btn" :style="{background: mainColor}">注 册</button>
  </div>
</template>

<script>
import { getCaptcha, register } from "@/api/login";
import "./login-style.less";
import { mapState } from 'vuex'
export default {
  data() {
    return {
      mobile: null,
      captcha: null,
      psw1: null,
      psw2: null,
      captchaStatus: false,
      invite_code: null
    };
  },
  computed: {
    ...mapState({
      mainColor: state => state.app.mainColor,
      subColor: state => state.app.subColor
    })
  },
  methods: {
    getCaptcha() {
      if (!this.mobile) {
        this.$dialog.toast({
          mes: "请填写手机号",
          timeout: 1500,
          icon: "error"
        });
      } else {
        getCaptcha(this.mobile).then(res => {
          if (res.status === 200) {
            this.captchaStatus = true;
          }
        });
      }
    },
    toLogin() {
      this.$router.push({
        path: "main-login",
        query: {
          invite_code: this.$route.query.invite_code
        }
      });
    },
    register() {
      if (!this.mobile) {
        this.$dialog.toast({
          mes: "请填写手机号",
          timeout: 1500,
          icon: "error"
        });
      } else if (!this.captcha) {
        this.$dialog.toast({
          mes: "请填验证码",
          timeout: 1500,
          icon: "error"
        });
      } else if (!this.psw1) {
        this.$dialog.toast({
          mes: "请输入密码",
          timeout: 1500,
          icon: "error"
        });
      } else if (!this.psw2) {
        this.$dialog.toast({
          mes: "请确认密码",
          timeout: 1500,
          icon: "error"
        });
      } else if (this.psw1 !== this.psw2) {
        this.$dialog.toast({
          mes: "两次密码不一致",
          timeout: 1500,
          icon: "error"
        });
      } else {
        if (this.$route.query.invite_code) {
        }
        register({
          username: this.mobile,
          password: this.psw2,
          captcha: this.captcha,
          invite_code: this.invite_code ? this.invite_code : undefined
        }).then(res => {
          if (res.status === 200) {
            this.$dialog.toast({
              mes: "注册成功！",
              timeout: 1500,
              callback: () => {
                this.$router.replace("/login");
              }
            });
          } else if (res.data.code === 208) {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1000
            })
          }
        });
      }
    }
  },
  created() {
    this.invite_code = this.$route.query.invite_code
      ? this.$route.query.invite_code
      : null;
  }
};
</script>

<style lang="less" scoped>
.login-container {
  padding-top: 0.2rem;

  .main-btn {
    margin-top: 1.8rem;
  }

  .captcha-btn {
    top: 0.15rem;
  }

  .login-input {
    margin-top: 0.65rem;
  }

  .disabled {
    background-color: #dfdfdf;
  }
  .to-login {
    font-size: 0.48rem;
    border: none;
    background: none;
    text-decoration: underline;
    color: #999999;
    margin-top: 0.48rem;
  }
}
</style>
